<template>
  <div>
    <!--    下拉刷新-->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

      <!--    <h1>我是修改个人信息</h1>-->
      <!--    导航-->
<!--      <div class="headBox defl">-->
<!--        <div class="headTop" @click="onClickLeft">-->
<!--          &lt;!&ndash;        <i class="iconfont icon-fanhui"></i>&ndash;&gt;-->
<!--          <van-icon name="arrow-left"/>-->
<!--        </div>-->
<!--        <div>修改个人信息</div>-->
<!--        <div @click="modifyFun">保存</div>-->
<!--      </div>-->
      <van-nav-bar
          title="修改个人信息"
          right-text="保存"
          left-arrow
          @click-left="onClickLeft"
          @click-right="modifyFun"
      />


      <!--头像信息-->
      <div class="content">
        <div class="item defl">

          <div>最好单独上传新头像</div>

          <van-uploader v-model="uploader" :max-count="1" :after-read="afterRead"/>


        </div>
        <div>
        </div>
        <div class="item defl">
          <div>昵称</div>
          <div>
            <input type="text" v-model="valuetext">
          </div>
        </div>
        <div class="item defl">
          <div>性别</div>
          <van-radio-group v-model="valueSex" direction="horizontal">
            <van-radio name="0">男</van-radio>
            <van-radio name="1">女</van-radio>
          </van-radio-group>
        </div>
        <div class="item">
          <div class="defl">
            <div>手机号</div>
            <div>
              <input type="text" v-model="valuePhonenumber">
            </div>
          </div>
          <p>{{ tipsP }}</p>
        </div>
        <div class="item defl">
          <div>密码</div>
          <div>
            {{ valuepass }}
          </div>
        </div>

      </div>

    </van-pull-refresh>


  </div>
</template>

<script>
import {Toast} from 'vant';
import {getPersonMsg, personalInformation, PhoneSignApiddd, uploadImgApi} from "@/api/api";
//uploadImgApi


export default {
  name: "Information",
  data() {
    return {
      valuetext: '昵称',
      valuePhonenumber: '18232****05',
      valuepass: '*****',
      valueSex: '0',
      pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
      tipsP: '',
      uploader: [{url: 'https://img01.yzcdn.cn/vant/leaf.jpg'}],
      isLoading: false,
    }
  },
  methods: {
    //下拉刷新
    onRefresh() {
      setTimeout(() => {
        // Toast('刷新成功');
        this.isLoading = false;
      }, 1000);
    },
    //上传图片
    afterRead(file) {
      Toast('上传中')
      console.log(file)
      //判断图片大小大于2mb阻止
      if (file.file.size > 1450000) {
        Toast('图片过大，请传小于1.45mb以下的')
      } else {
        // this.uploader = [{url: file.file}]


        // JSON.parse(localStorage.vuex).userInfo.avatar

        //上传图片接口
        uploadImgApi(file.file).then(res => {
          console.log(res)
          Toast('上传成功')
          getPersonMsg().then(res=> {
            console.log(res)
            if (res.data.code == 0) {
              this.$store.commit('getUserInfo', res.data.data)
              console.log(res)
              console.log(this.$store.state.userInfo)
              console.log(localStorage.vuex)
              // this.$router.go(-1)
            }
          })
        })
      }
    },

    onClickLeft() {
      Toast('返回');
      this.$router.go(-1)
    },
    validator(val) {
      return /1\d{10}/.test(val);
    },
    modifyFun() {
      //只能传昵称，手机号，性别
      console.log(this.valuetext, this.valueSex, this.valuePhonenumber, '删除')

      PhoneSignApiddd(this.valuetext,this.valuePhonenumber,this.valueSex).then(res => {
        console.log(res)
        Toast('保存成功')
            getPersonMsg().then(res=> {
              console.log(res.data.data)
              if (res.data.code == 0) {
                this.$store.commit('getUserInfo', res.data.data)
                this.$router.go(-1)
              }
            })
      })
    },
    onSubmit(values) {
      console.log(123, values)
    },
    //  手机号验证
    phoneVerification(value) {
      if (value) {
        let a_reg = RegExp(/^[a-zA-Z0-9]$/)
        let b_reg = RegExp(/[~!@#$%^&*()\-=·@#￥%……&*（）、‘”'"[]{}——+]+/)
        let c_reg = RegExp(/\s/)
        let d_reg = /^[1][3,4,5,7,8][0-9]{9}$/
        if (a_reg.test(value)) {
          Toast('格式错误');
          this.tipsP = '格式错误'
          return false
        } else if (b_reg.test(value)) {
          Toast('不能为特殊字符');
          this.tipsP = '不能为特殊字符'
          return false
        } else if (c_reg.test(value)) {
          Toast('不能为空格');
          this.tipsP = '不能为空格'

          return false
        } else if (!d_reg.test(value)) {
          Toast('请填写正确的手机号')
          this.tipsP = '请填写正确的手机号'

          return false
        } else {
          this.tipsP = ''
          return true
        }
      } else {
        Toast('请填写手机号');
        this.tipsP = '请填写手机号'
        return false
      }
    },
  }
  ,
  created() {
    //获取登录状态，渲染修改个人信息
    personalInformation().then(res => {
      console.log(res)
      this.valuetext = res.data.data.userName
      this.valuePhonenumber = res.data.data.phonenumber
      this.valueSex = res.data.data.sex
      this.uploader = [{url: res.data.data.avatar}]
      this.userId = res.data.data.userId
    })
  }
  ,
  updated() {
    console.log(this.uploader)
    this.phoneVerification(this.valuePhonenumber)
  }

}
</script>

<style scoped lang="less">
.Centext {
  text-align: center;
}

.defl {
  display: flex;
  justify-content: space-between;

}

.deflLeft {
  display: flex;
  justify-content: left;
}

//导航栏
.headBox {
  background-color: #FF0000;
  line-height: 64px;
  height: 64px;
  color: white;
  margin-bottom: 32px;

  div {
    width: 100px;
    text-align: center;
  }

  .headTop {
    padding-left: 18px;

    i {
      font-size: 22px;
    }
  }
}

//头像修改
.content {
  margin-top: 20px;
  .item {
    padding: 4px;
    margin: 0 25px;
    //height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #cdcdcd;

    input {
      border: 0px;
      text-align: right;
    }

    .inputText {
      padding: 0;
      line-height: 40px;
      font-size: 16px;

      input {
        text-align: right !important;
      }
    }

    p {
      text-align: center;
      color: @blue;
    }
  }
}
</style>